<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单验证</title>

    <style>
        span {
            font-size: 12px;
            color: red;
        }
    </style>
</head>

<body>
    <!-- 
        (1)用户名不能为空
        (2)用户名必须在6-14位之间
        (3)用户名只能有数字和字母组成,不能含有其它符号(正则表达式)
        (4)密码和确认密码一致,邮箱地址合法。
        (5)统一失去焦点验证
        (6)错误提示信息统一在span标签中提示,并且要求字体12号,红色。
        (7)文本框再次获得焦点后,清空错误提示信息,如果文本框中数据不合法要求清空文本框的 value
        (8)最终表单中所有项均合法方可提交
 -->

    <script>
        window.onload = function() {
            // 绑定 myus 
            myspelt = document.getElementById("myspan")
            pwd = document.getElementById("pwdsp")
            var myuselt = document.getElementById("myus")
                // 失去焦点 myusbl 绑定blur事件
            myuselt.onblur = function() {
                    // 失去焦点验证
                    // 获取用户名
                    var username = myuselt.value
                        // 去掉前后空白 trim()方法
                    username = username.trim()
                        // 若不合法写入span
                    if (username == "") {
                        // 绑定myspan
                        myspelt.innerHTML = "用户名不能为空"
                    } else {
                        // 用户名不为空 验证长度是否为6-14位之间
                        if (username.length < 6 | username.length > 14) {

                            myspelt.innerHTML = "用户名长度必须为6-14位之间"
                        } else {
                            // 验证是否有特殊字符 正则表达式
                            var regExp = /^[a-zA-Z0-9]+$/
                            var ok = regExp.test(username)
                            if (ok) {
                                // 合法
                                myspelt.innerHTML = ""
                            } else {
                                // 不合法
                                myspelt.innerHTML = "用户名只能有数字和字母组成"

                            }
                        }
                    }
                }
                // 获得焦点：清空span的错误信息
            myuselt.onfocus = function() {
                myspelt.innerHTML = ""
            }

            var yzwd = document.getElementById("cfpwd")
                // 验证密码失去焦点时
            yzwd.onblur = function() {
                // 获取密码value
                mypwd = document.getElementById("uspwd").value
                    // 获取确认密码value
                var cfpwdd = yzwd.value
                    // 进行比对
                if (mypwd != cfpwdd) {
                    pwd.innerHTML = "密码和确认密码不一致"
                } else {
                    pwd.innerHTML = ""
                }
            }
            yzwd.onfocus = function() {
                pwd.innerHTML = ""
            }


            document.getElementById("bt").onclick = function() {
                // 点击button开始验证成功将提交
                // 如果验证密码提示信息为空提交表单
                // 重点:使用JS代码怎么触发事件？？？？？
                myuselt.focus() // 触发文本框的获取焦点事件
                myuselt.blur() // 触发文本框的失去焦点事件
                    // 验证密码，怎么验证密码？让确认密码失去焦点
                yzwd.focus()
                yzwd.blur()
                    // 当所有的span都是空的 密码不为空表单合法 sumbit方法提交
                if (myspelt.innerHTML == "" && pwd.innerHTML == "" && mypwd != "") {
                    // form对象submit方法直接提交表单
                    document.getElementById("userform").submit()
                }
            }
        }
    </script>
    <form action="007-表单验证.html" id="userform">
        <!-- name提交表单时必须用 -->
        用户名:<input type="text" name="usname" id="myus">
        <span id="myspan"></span><br>
        <!--  -->
        密码:<input type="password" name="pwd" id="uspwd">
        <br>
        <!-- 确认密码是不需要提交给服务器的，这个name不要写！ -->
        确认密码：<input type="password" id="cfpwd">
        <span id="pwdsp"></span>
        <br>
        <!-- 用户此时不按照规定来提交 -->
        <!-- <input type="submit" value="提交"> -->
        <!-- button不能提交表单，但是js代码可以提交表单 -->
        <input type="button" value="注册" id="bt">
    </form>
</body>

</html>